<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-04-22 00:01:04
 * @LastEditors: Ruohong Yu
 * @LastEditTime: 2022-05-24 14:18:05
 * @Description: file content
 * @FilePath: \merword:\program\p\pythonProject\FTP_Project\templates\log.html
-->
<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-04-21 15:24:48
 * @LastEditors: Ruohong Yu
 * @LastEditTime: 2022-04-22 13:40:16
 * @Description: file content
 * @FilePath: \merword:\program\p\pythonProject\FTP_Project\templates\home.html
-->
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>

  </script>
</head>
<body>
  <div class="header">
    <div class="proname">COW FTP</div>
    <div class="proname"><a style="text-decoration: none;color: aliceblue;" href="./home">首页</a></div>
    <div class="proname"><a style="text-decoration: none;color: aliceblue;" href="./up">上传</a></div>
    <div class="proname"><a style="text-decoration: none;color: aliceblue;" href="./log">日志</a></div>
  </div>
  
  <div class="contain">
    <div class="oper">
      <div class="opername">名称</div>
      <div class="opername">时间</div>
      <div class="opername">操作</div>
      <a class="uplog" target="" href="/explog" >下载日志</a>
    </div>
    {% if operlist %}
          {% for oper in operlist %}
            <div class="detal">
              <div class="detalinfor">
                {{oper.name}}
              </div>
              <div class="detalinfor">
                {{oper.time}}
              </div>
              <div class="detalinfor">
                {{oper.state}}
              </div>
            </div>
          {% endfor %}
      {% endif %}
  </div>


</body>
<style>
  html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    background: url("/static/assets/5.jpg") center no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    font-weight: 300;
  }
  .header{
    display: flex;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #313c4b71;
    color: aliceblue;
  }
  .proname{
    width: 80px;
    color: aliceblue;
    margin-left: 30px;
  }
  .uplog{
    cursor: pointer;
    position: absolute;
    right: 10px;
    background-color: #8c1c28;
    width: 90px;
    text-align: center;
    text-decoration:none;
    color:white;
  }
  .uplog:hover{
    background-color: white;
    color: #8c1c28;
    transition:500ms;
  }
  .contain{
    margin: 0 10%;
    border-radius: 0px 0px 10px 10px;
    backdrop-filter: blur(20px);
  }
  .oper{
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #00000094;
    color: aliceblue;
    display: flex;
  }
  .opername{
    flex: 1;
    flex: 1;
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
  .detal{
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #00000036;
    color: aliceblue;
  }
  .detalinfor{
    flex: 1;
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
</style>
</html>